<template>
  <div>
    <a-row>
      <a-col :span="16">
        <div :style="{ textAlign: 'right', marginBottom: '10px' }">
          <a-button type="primary" :disabled="!onSwitch" style="margin-right:10px;" @click="addRegulation">增加领取规则</a-button>
          <a-switch :loading="loading" :checked="onSwitch" checked-children="开" un-checked-children="关" @change="onChange" />
        </div>
        <FullCalendar
          ref="fullCalendar"
          firstDay="1"
          weekNumberCalculation="ISO"
          defaultView="dayGridMonth"
          :header="null"
          :plugins="calendarPlugins"
          :events="eventData"
          @eventClick="editEvent"
        />
      </a-col>
    </a-row>
    <a-modal
      title="领取规则设置"
      v-model="visible"
      :width="600"
      @ok="onSubmit"
      @cancel="onCancel"
    >
      <a-form-model
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="取值月份" prop="month_type">
          <a-radio-group v-model="ruleForm.month_type">
            <a-radio v-for="(item, index) in monthOpts" :key="index" :value="index">
              {{item}}
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="选择时间区间">
          <a-range-picker v-model="times" style="width:100%" @change="changeDate" />
        </a-form-model-item>
        <a-form-model-item label="关系">
          <a-select v-model="ruleForm.amounts_condition" placeholder="请选择比较关系">
            <a-select-option v-for="(item,index) in conditionOpts" :key="index" :value="index">
              {{item}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="小于业绩" v-if="ruleForm.amounts_condition == '<' || ruleForm.amounts_condition == '<='">
          <a-input v-model="ruleForm.lft_amounts" placeholder="请小于业绩" />
        </a-form-model-item>
        <a-form-model-item label="大于业绩" v-if="ruleForm.amounts_condition == '>' || ruleForm.amounts_condition == '>='">
          <a-input v-model="ruleForm.rft_amounts" placeholder="请输大于业绩" />
        </a-form-model-item>
        <a-form-model-item label="最低业绩" v-if="ruleForm.amounts_condition == 'between'">
          <a-input v-model="ruleForm.lft_amounts" placeholder="请输起始业绩" />
        </a-form-model-item>
        <a-form-model-item label="最高业绩" v-if="ruleForm.amounts_condition == 'between'">
          <a-input v-model="ruleForm.rft_amounts" placeholder="请输结束业绩" />
        </a-form-model-item>
        <a-form-model-item label="可领取资源数" prop="receive_num">
          <a-input v-model="ruleForm.receive_num" placeholder="请选择资源可领取数" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { getAddReceive, getReceive, postAddReceive } from '@/api/receive'
import { getReceive as getReceiveBase, postReceive } from '@/api/schedule'
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import moment from 'moment'

export default {
  components: {
    FullCalendar
  },
  name: 'AsPerformance',
  data () {
    return {
      receiveForm: {},
      calendarPlugins: [ // plugins must be defined in the JS
        dayGridPlugin,
        interactionPlugin // needed for dateClick
      ],
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
      eventData: [
        // {
        //   start: '2021-02-01',
        //   end: '2021-02-08',
        //   title: '本月业绩小于20000的顾问可领取3条'
        // }
      ],
      visible: false,
      ruleForm: {},
      rules: {
        month_type: [ { required: true, message: '选择计算业绩的月份', trigger: 'change' } ],
        receive_num: [ { required: true, message: '可领子资源数不能为空', trigger: 'blur' } ]
      },
      monthOpts: {},
      conditionOpts: {},
      times: [],
      loading: false,
      onSwitch: false
    }
  },
  created () {
    this.getReceiveStatus()
    this.getReceive()
  },
  methods: {
    moment,
    onSubmit () {
      const app = this
      const data = app.ruleForm
      const form = {}
      for (const k in data) {
        form['setting_receive[' + k + ']'] = data[k]
      }
      postAddReceive(form).then(res => {
        if (res.status === 0) {
          app.visible = false
          app.onCancel()
          app.getReceive()
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    getReceiveStatus () {
      const app = this
      getReceiveBase().then(res => {
        if (res.status === 0) {
          if (res.result.receive_setting.receive_yj_enable === '1') {
            app.onSwitch = true
          } else {
            app.onSwitch = false
          }
        }
      })
    },
    onChange (checked) {
      const app = this
      const data = {}
      if (checked) {
        data['receive_setting[receive_yj_enable]'] = '1'
        app.loading = true
        postReceive(data).then(res => {
          app.getReceiveStatus()
        }).finally(() => {
          app.loading = false
        })
      } else {
        data['receive_setting[receive_yj_enable]'] = '0'
        app.loading = true
        postReceive(data).then(res => {
          app.getReceiveStatus()
        }).finally(() => {
          app.loading = false
        })
      }
    },
    onCancel () {
      this.ruleForm = {}
      this.times = []
      this.visible = false
    },
    getReceive () {
      const app = this
      getReceive().then(res => {
        if (res.status === 0) {
          app.monthOpts = res.result.month_type_opts
          app.conditionOpts = res.result.condition_opts
          app.eventData = res.result.data
          for (const k in app.eventData) {
            app.eventData[k].start = app.eventData[k].lft_receive_date
            app.eventData[k].end = app.eventData[k].rgt_receive_date
            app.eventData[k].title = '业绩' + app.eventData[k].amounts_condition + app.eventData[k].lft_amounts + '的顾问在' +
              app.eventData[k].lft_receive_date + '至' + app.eventData[k].rgt_receive_date + '可领取' + app.eventData[k].receive_num + '条资源'
          }
          // for (let i = 0; i < result.length; i++) {
          //   events.start = app.eventData[k].lft_receive_date
          //   events.end = app.eventData[k].rgt_receive_date
          //   // app.eventData.push(events)
          // }
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    changeDate (dates, dateStrings) {
      this.ruleForm.lft_receive_date = dateStrings[0]
      this.ruleForm.rgt_receive_date = dateStrings[1]
    },
    addRegulation () {
      const app = this
      getAddReceive().then(res => {
        if (res.status === 0) {
          app.monthOpts = res.result.month_type_opts
          app.conditionOpts = res.result.condition_opts
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
      this.visible = true
    },
    editEvent (event) {
      this.$info({
        title: event.event.title
      })
    }
  }
}
</script>

<style scoped>

</style>
